<template>
    <div class="info-header" :style="{'background-color':themeColor}" :class="collapse?'position-collapse-left':'position-left'">
      <span class="hamburg">
        <el-menu class="el-menu-demo" :background-color="themeColor" text-color="#fff" :active-text-color="themeColor" mode="horizontal">
          <el-menu-item index="1" @click="onCollapse"><hamburger :isActive="collapse"></hamburger></el-menu-item>
        </el-menu>
      </span>
      <span class="toolbar">
        <el-menu  class="el-menu-demo" :background-color="themeColor" text-color="#fff" :active-text-color="themeColor" mode="horizontal">
          <el-menu-item index="1">
            <theme-picker class="theme-picker" :default="themeColor" @onThemeChange="onThemeChange"></theme-picker>
          </el-menu-item>
          <el-menu-item index="2" v-popover:popover-personal>
            <span class="user-info"><span v-text="user.userName"></span><img src="@/assets/user.png"/></span>
            <el-popover ref="popover-personal" placement="bottom-end" trigger="click" :visible-arrow="false">
              <personal-panel :user="user"></personal-panel>
            </el-popover>
          </el-menu-item>
        </el-menu>
      </span>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import Hamburger from '../../Component/Hamburger/Index'
import ThemePicker from '../../Component/ThemePicker/Index'
import PersonalPanel from '../../Component/PersonalPanel/Index'
export default {
    components: {
        PersonalPanel,
        Hamburger,
        ThemePicker },
    name: 'TopBar',
    data() {
        return {
            user: JSON.parse(sessionStorage.getItem('user'))
        }
    },
    computed: {
        ...mapState({
            collapse: state => state.app.collapse,
            themeColor: state => state.app.themeColor
        })
    },
    methods: {
    // 折叠导航栏
        onCollapse: function() {
            this.$store.commit('onCollapse')
        },
        onThemeChange: function(themeColor) {
            this.$store.commit('setThemeColor', themeColor)
        }
    }
}
</script>

<style scoped>
  .info-header{
    height: 60px;
    line-height: 60px;
    border-color: rgba(180, 190, 190, 0.8);
    border-left-width: 1px;
    border-left-style: solid;
    position: fixed;
    top: 0;
    left: 200px;
    right: 0;
    bottom: 0;
    z-index: 1030;
  }
  .hamburg{
    float: left;
  }
  .toolbar{
    float: right;
  }
  .position-collapse-left{
    left: 65px;
  }
  .position-left{
    left: 200px;
  }
  .user-info {
    font-size: 16px;
    color: #fff;
    cursor: pointer;
  }
  .user-info img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin: 10px 0px 10px 10px;
  }
</style>
